<template>
  <div class="home">
    <header>
      <h2>淘</h2>
      <input type="text" placeholder="搜索您想要的商品">
      <span>···</span>
    </header>
    <main>
      <router-view />
    </main>
    <footer>
      <router-link to='/homes'>首页</router-link>
      <router-link to='/discover'>发现</router-link>
      <router-link to='/shopcar'>购物车</router-link>
      <router-link to='/my'>我的</router-link>
    </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang='scss'>
.home{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header{
    width: 100%;
    height: 50px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #ccc solid;
    h2{
      color: orangered;
    }
    input{
      flex: 1;
      margin: 0 25px;
    }
  }
  main{
    flex: 1;
    overflow: hidden;
  }
  footer{
    width: 100%;
    height: 40px;
    display: flex;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px #ccc solid;
    a{
      color: #666;
      &.router-link-active{
        color: orangered;
      }
    }
  }
}

</style>